<template>
	<div class="main">
	<!-- 热销详情头部 -->
		<el-dialog title="热销详情" :visible.sync="dialogFormVisible" width="1000px">
				<el-card shadow="never" class="card">
		 <div slot="header" class="clearfix">
		 	<span>条件查询</span>
		 
		 </div>
		 <!-- 查询表单 -->
		 <el-form ref="forms" :model="forms"  size="mini" :inline='true'>
		 	<el-form-item size="mini" style="width: 150px;">
		 		<el-input placeholder="商品名称/模糊查询"  v-model="forms.name"></el-input>
		 	</el-form-item>
		 	<el-form-item style="width: 110px;">
		 		<el-input v-model="forms.brandId" placeholder="商品货号"></el-input>
		 	</el-form-item>
		 	<el-form-item >
				<!-- 单选框选择对象应该加 value-key="id" -->
		 		<el-select value-key="id"  v-model="forms.brandName"  placeholder="品牌" style="width: 150px;">
		 			<el-option :label="item.name" v-for="item in items" :key="item.id" 
					:value="item"
					
					
					></el-option>
		 			
		 		</el-select>
		 	</el-form-item>
		<!-- 	<el-form-item >
				<el-select  placeholder="上架状态" style="width: 120px;">
					<el-option label="上架"  :value="1"></el-option>
					<el-option label="未上架"  :value="0"></el-option>
				</el-select>
			</el-form-item> -->
		<!-- 	<el-form-item style="width: 150px;">
			<!-	<el-select  placeholder="审核状态" >
					<el-option label="审核"></el-option>
					<el-option label="未审核"></el-option>
				</el-select> -->
			<!-- </el-form-item> --> 
		
		 
		 	<el-form-item>
		 		<el-button type="primary" size="mini"  @click="search" >查询</el-button>
		 		<el-button type="primary" size="mini"  @click="empty" >重置</el-button>
		 
		 	</el-form-item>
		 </el-form>
			</el-card>
			<!-- 热销详情商品列表展示 -->
			<el-card shadow="never" class="card2">
				<div slot="header" class="clearfix">
					<span>商品列表</span>
				
				</div>
				<el-radio-group v-model="radio">
				<el-table :data="tableData" border style="width: 100%" >
					<el-table-column fixed type="index" align="center" width="50" label="序号">
					</el-table-column>
					
					
					<!-- 小圆点 -->
					<el-table-column prop="title" label="选择" align="center" width="50">
						<template slot-scope="scope">
						    <el-radio :label="scope.row.id"   @change="goodsInfo(scope.row)" > <span></span></el-radio>
						</template>
						  
					</el-table-column>
						<!-- 小圆点 -->
					
					
				<el-dialog title="编辑限时活动" :visible.sync="dialogFormVisibles" append-to-body>
					<div class="item1">
						<p>商品原价{{dialog.price}}</p>
						<p>商品名称:{{dialog.name}}</p>
					 </div>
					 <div  class="item2">
						 <div>
							 促销价格
							  <el-input-number size="small" v-model="dialog.promotionPrice"></el-input-number>
						 </div>
						 <div>
							 排序
							  <el-input-number size="small" v-model="dialog.sort"></el-input-number>
						 </div>
					 </div>
					 <div class="item3">
						 <div>
							 开始时间
							 <div class="block">
							  
							   <el-date-picker
							 				 value-format="yyyy-MM-dd HH:mm:ss"
							     v-model="dialog.promotionStartTime"
							     type="datetime"
							     placeholder="选择日期时间">
							   </el-date-picker>
							 </div>
						 </div>
						 <div>
							 结束时间
							 <div class="block">
							  
							   <el-date-picker
							   value-format="yyyy-MM-dd HH:mm:ss"
							     v-model="dialog.promotionEndTime"
							     type="datetime"
							     placeholder="选择日期时间">
							   </el-date-picker>
							 </div>
						 </div>
					 </div>
					 <div class="item4">
						 <div>
							活动限购数量
							<el-input v-model="dialog.promotionPerLimit" placeholder="请输入活动限购数量"></el-input> 
						 </div>
						<div>
							商品图片
							<img :src="dialog.pic" alt="">
						</div>

					 </div>
					 <el-button type="primary" size="mini"  @click="time" >确定</el-button>
					</el-dialog>
					<el-table-column label="商品图片" width="120">
						<template slot-scope="scope">
							<img :src="scope.row.pic" alt="" style="width: 80px; height: 80px;">
						</template>
					</el-table-column>
					<el-table-column label="商品名称" prop="name"   align="center" width="180">
						
					</el-table-column>
					<el-table-column  label="商品价格" align="center" width="150">
						<template slot-scope="scope">
							<div>原价:{{scope.row.originalPrice}}</div>
							<div>现价:{{scope.row.originalPrice}}</div>
						</template>
					</el-table-column>
					<el-table-column label="商品品牌" prop="brandName"   align="center" width="180">
						
					</el-table-column>
					<el-table-column label="商品类别" prop="productCategoryName"   align="center" width="100">
						
					</el-table-column>
					<el-table-column label="商品重量" prop="weight"   align="center" width="100">
						
					</el-table-column>
					
					
				</el-table>
				</el-radio-group>
				
				
				
				<!-- 分页 -->
				<div class="block">
				
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page.currentpage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="page.total">
					</el-pagination>
				</div>
				
				
				</el-card>
		</el-dialog>
	
		
		
		
		<!-- 表单内容区 -->

		<el-card shadow="never" class="content-card">
			<div slot="header" class="clearfix">
				<el-button type="primary" size="small" @click="dialogFormVisible = true">新增</el-button>
			</div>

			<el-table :data="form" border style="width: 100%">
				<el-table-column fixed type="index" align="center" label="序号" width="150">
				</el-table-column>


				<el-table-column label="商品图片" width="120" align="center">
					<template slot-scope="scope">
						<img :src="scope.row.pic" alt="" style="width: 80px; height: 80px;">
					</template>
				</el-table-column>
				<el-table-column label="活动时间" align="center" width="220">
					<template slot-scope="scope">
						<div>开始时间:{{scope.row.promotionStartTime}}</div>
						<div>结束时间:{{scope.row.promotionEndTime}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="author" label="是否过期" align="center" width="80">
				</el-table-column>
				<el-table-column prop="name" label="商品名称" align="center" width="240">
				</el-table-column>
				<el-table-column prop="brandName" label="品牌名称" align="center" width="120">
				</el-table-column>
				<el-table-column label="创建时间" align="center" width="220">
					<template slot-scope="scope">
						<div>{{scope.row.createTime}}</div>

					</template>
				</el-table-column>
				<el-table-column label="操作" width="80" align="center">
					<template slot-scope="scope">

						<el-button type="danger" size="small" @click="remove(scope.row.recommendId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>


		</el-card>

	</div>
</template>

<script>
	import {
		findAllRecommends,
		updateRecommend,
		homeRecommend,
		delRecommend,
		addRecommend,
		productsByPage,
		findAllBrand
	} from "@/api/marketing/index.js"
	export default {
		data() {
			return {
				form: [],
				dialogFormVisibles:false,
			tableData:[],
			searchForm:{},
			dialog:{
				price:0,
				name:"",
				promotionPrice: 1,
				sort:1,
				promotionStartTime:"",
				promotionEndTime:"",
				pic:"",
				promotionPerLimit:1,
				productId:"",
				brandId:"",
				productCategoryId:"",
				productAttributeCategoryId:""
			},
			// 分页对象
			page: {
				currentpage: 1,
				pageSizes: [10, 15, 20, 25],
				pageSize: 10,
				total: 0,
				input:"",
			},
			forms:{
				name:'',
				brandId:'',
				brandName:''
			},
			items:[],
				   value:true ,
					 radio:0,
					 dialogFormVisible: false,
			}
		},
		methods: {
			//修改限时活动
			time(){
				updateRecommend(this.dialog).then(res=>{
					console.log(res)
					if(res.success){
						this.dialogFormVisibles = false
						this.getProductsByPage()
					}
				})
			},
			// 小圆点
			goodsInfo(val){
				console.log(val)
				this.dialogFormVisibles = true
				this.dialog = val
				this.dialog.productId = val.productCategoryId
			},
			//重置
			empty(){
				this.forms = this.$options.data().forms
			},
			// 查询
			search(){
			console.log( this.forms.brandName)	 
			
				// 分页初始化
				this.page = this.$options.data().page
				// 遍历表单把需要查询的数据放到searchForm里
				for (const key in this.forms) {
				
				
					this.searchForm[key] = this.forms[key]
				
				}
					this.getProductsByPage()
			},
			// 分页
			handleSizeChange(val) {
				this.page.pageSize = val
				this.getProductsByPage()
			},
			handleCurrentChange(val) {
				console.log(val)
				this.page.currentpage = val
				this.getProductsByPage()
			},
			//获取商品分页列表
			getProductsByPage(){
				productsByPage(this.page.currentpage,this.page.pageSize,this.searchForm).then(res=>{
					console.log(res)
					this.tableData = res.data.rows
					this.page.total = res.data.total
				})
			},
			// 获取活动列表
			getFindAllRecommends() {
				findAllRecommends().then(res => {
					
					this.form = res.data.items
				})
			},
			//删除
			remove(val) {
				

				this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					delRecommend(val).then(res => {
					
						if (res.success) {
							this.$message.success("删除成功")
							this.getFindAllRecommends()
						} else {
							this.$message.error("删除失败,请检查网络设置")
							this.getFindAllRecommends()
						}
					})

				})

			}
		},
		created() {
			this.getFindAllRecommends(),
			this.getProductsByPage(),
			findAllBrand().then(res=>{
				console.log(res)
				this.items = res.data.items
			})
		}
	}
</script>

<style>
</style>
